<template>
  <div style="height:100%;">
    <!-- 顶部 -->
    <div class="top" style="padding-bottom:0px;">
      <span>9:41</span>
      <div>
        <img src="./xinhao.png" style="width:25px;height:25px;" />
        <img src="./icon_huabanfuben.png" style="width:25px;height:25px;" />
        <img src="./iconset0252.png" style="width:25px;height:25px;" />
      </div>
    </div>
    <div class="top" style="padding-top:0px;">
      <div>
        <i class="el-icon-location-outline"></i>
        <span>上海</span>
      </div>
      <p>星Life</p>
      <img src="./导航图.png" alt="">
    </div>
    <!-- banner图 -->
    <div class="banner">
      <img :src="list" alt="" style="width:100%;">
      <!-- 金刚区 -->
      <div class="Kingkongarea">
        <div class="imgs" v-for="(item,index) in list1" :key="index">
          <img :src="item.materialContent" alt="">
          <p>{{item.materialName}}</p>
        </div>
      </div>
    </div>
    <div class="cound">
      <!-- 通知 -->
      <div class="released">
        <div class="releasedtop" v-for="(item,index1) in list2" :key="index1">
          <p>{{item.materialName}}</p>
          <p class="conters"></p>
        </div>
      </div>

      <!-- 福利 -->
      <div class="welfare">
        <div class="welfarefist" v-for="(item,index2) in list3" :key="index2" :style="{'background-color': item.bgColor}">
          <p>{{item.materialName}}</p>
          <img :src="item.materialContent">
        </div>
      </div>

      <!-- 活动 -->
      <div class="activity">
        <div class="activitytop">
          <p>{{materialName}}</p>
          <p>丰富的社区活动都在这</p>
        </div>
        <div class="activitybottom">
          <img :src="list4" alt="">
          <p>更多活动></p>
        </div>
      </div>

      <!-- 热门商品 -->
      <div class="commodity">
        <p>{{positionName}}</p>
        <div class="commoditybottom">
          <div class="hot" v-for="(item,index3) in list5" :key="index3">
            <img :src="item.goodsImageUrl" alt="" style="width:120px;height: 70px;">
            <div>
              <p class="hotfist">{{item.goodsName}}</p>
              <span style="color: #fa541c;">￥{{item.goodsMinPrice}}</span>
              <span style="color: #b3b3b3;">￥{{item.goodsMaxPrice}}</span>
            </div>
          </div>
          <div v-if="list5.length==0" style="text-align: center;">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "homeLeft",
  props: ['list', 'list1', 'list2', 'list3', 'list4', 'list5', 'materialName', 'positionName'],
  data () {
    return {
    };
  },
}
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
}
.cound {
  padding: 10px;
  margin-top: 70px;
}
.coundfist {
  display: flex;
  margin-bottom: 10px;
  background-color: #fff;
}
.Kingkongarea {
  background: #ffffff;
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  left: 40px;
  top: 270px;
  width: 304px;
  height: 105px;
  border-radius: 6px;
  .imgs {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  img {
    width: 45px;
    height: 45px;
    margin-bottom: 5px;
  }
}
.released {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  display: flex;
  .releasedtop {
    display: flex;
    align-items: center;
    .conters {
      background-color: #d8d8d8;
      width: 2px;
      height: 12px;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}
.welfare {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  display: flex;
  .welfarefist {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 64px;
    width: 138px;
    margin-right: 4px;
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.activity {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  .activitytop {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .activitybottom {
    img {
      height: 130px;
      width: 100%;
      margin-top: 5px;
    }
  }
}
.commodity {
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  overflow: hidden;
  clear: both;
  .commoditybottom {
    margin-top: 5px;
    overflow: hidden;
    clear: both;
    .hot {
      float: left;
      width: 50%;
      display: flex;
      margin-bottom: 5px;
      flex-direction: column;
    }
    .hotfist {
      width: 130px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.banner {
  width: 100%;
  margin-top: 10px;
}
</style>
